<template>
	
</template>

<script>
	export default {
		data() {
			return {
				isFocus: false,
				isVoice: 0,
				keyInput:  null,
				showPopup: true
			}
		},
		onLoad() {

		},
		methods: {
			showKeyboard(event) {
				this.keyInput = event.target;
			},
			openPopup() {
				// console.log('open');
			},
			closePopup() {
				this.showPopup = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
.preview_popup{
	.my_nav{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 40rpx 40rpx;
		.item{
			padding:0 20rpx;
			margin-right: 30rpx;
		}
		.ico{
			display: block;
			width: 50rpx;
			height: 50rpx;
			margin: 0 auto;
		}
		.name{
			font-size: 24rpx;
			font-weight: normal;
			color: #A7A7A7;
			padding-top: 10rpx;
		}
	}
}


.welcome_ques{
	position: fixed;
	left:40rpx;
	bottom: 620rpx;
	right: 40rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 53%, rgba(0, 0, 0, 0) 100%);
	display: inline-flex;
	align-items: center;
	font-size: 26rpx;
	font-weight: 500;
	line-height: 44rpx;
	text-align: justify;
	color:#fff;
	width: 442rpx;
	padding:5rpx 20rpx;
	box-sizing: border-box;
	text{
		color: #AFAFAF;
		padding-right: 10rpx;
	}
}
.more_scene{
	width: 680rpx;
	.search{
		display: flex;
		align-items: center;
		width: 460rpx;
		height: 70rpx;
		border-radius: 35px;
		background: #1F1F1F;
		margin: 0 0 0 30rpx;
		padding:0 10rpx 0 25rpx;
		box-sizing: border-box;
		.ico_ss{
			flex-shrink: 0;
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		.input_ss{
			width: 100%;
			color:#fff;
			font-size: 22rpx;
			font-weight: normal;
			line-height: 32rpx;
		}
		.btn{
			flex-shrink: 0;
			height: 54rpx;
			border-radius: 30rpx;
			background: #F9BE01;
			font-size: 22rpx;
			font-weight: 500;
			line-height: 54rpx;
			text-align: center;
			color: #292D32;
		}
	}
	.title{
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #FFFFFF;
		padding: 40rpx 30rpx 0;
	}
	.list{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-right: 30rpx;
		.item{
			width: 186rpx;
			position: relative;
			margin-top: 30rpx;
			margin-left: 30rpx;
			background: #1F1F1F;
			border-radius: 10rpx;
			.info{
				padding:10rpx 15rpx;
				.name{
					font-size: 22rpx;
					font-weight: normal;
					line-height: 32rpx;
					text-align: justify;
					color: #FFFFFF;
				}
				.tag{
					font-size: 18rpx;
					font-weight: normal;
					line-height: 26rpx;
					text-align: justify;
					color: #999999;
				}
			}
			.lock{
				position: absolute;
				left:0;
				right: 0;
				top:0;
				bottom: 0;
				z-index: 9;
				display: flex;
				align-items: center;
				justify-content: center;
				.ico_8{
					width: 36rpx;
				}
			}
			.ph{
				display: block;
				width: 100%;
				height: 320rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
			
		}
	}
}
.chatting{
	position: fixed;
	left:0;
	top:200rpx;
	right: 0;
	width: 620rpx;
	height: 800rpx;
	margin: 0 auto;
	border:1px solid #F9BE01;
	border-radius: 30rpx;
	padding:10rpx 25rpx;
	background:rgba(0, 0, 0, 0.5);
	background-size: 100% auto;
	overflow: hidden;
	.bg_img{
		width: 100%;
		position: absolute;
		left:0;
		bottom: 0;
		right: 0;
	}
	.item{
		display: flex;
		padding:15rpx 0;
		align-items: self-start;
		justify-content: space-between;
		&.row_reverse{
			flex-direction: row-reverse;
			.text{
				text-align: right;
				padding-right: 15rpx;
			}
		}
		.ph{
			flex-shrink: 0;
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
		}
		.text{
			width: 100%;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 44rpx;
			text-align: justify;
			color:#fff;
			padding:5rpx 0;
			padding-left:15rpx;
			text{
				color: #AFAFAF;
			}
		}
	}
}
.voice{
	position: fixed;
	left:0;
	bottom: 80rpx;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 40rpx;
	.btn_big{
		width: 450rpx;
		height: 70rpx;
		border-radius: 40px;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			font-size: 26rpx;
			font-weight: 500;
			line-height: 30rpx;
			color: #FFFFFF;
			text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.3);
			padding-left: 8rpx;
		}
	}
	.btn{
		width: 70rpx;
		height: 70rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ico_13{
		width: 46rpx;
		height: 46rpx;
	}
	.ico_14{
		width: 40rpx;
		height: 40rpx;
	}
	.ico_15{
		width: 40rpx;
		height: 40rpx;
	}
}
.intellect{
	position: fixed;
	left: 40rpx;
	right: 40rpx;
	bottom: 100rpx;

	background-size: 100% auto;
	height: 470rpx;
	.list{
		display: flex;
		flex-wrap: wrap;
		padding:20rpx 15rpx;
		.item{
			line-height: 56rpx;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, 0.6);
			box-sizing: border-box;
			border: 2rpx solid #F9BE01;
			color:#fff;
			font-size: 20rpx;
			font-weight: bold;
			padding:0 25rpx;
			margin: 14rpx 10rpx;
			&.hover{
				background: rgba(249, 190, 1, 0.3);
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
			}
		}
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.ico_3{
			width: 46rpx;
		}
		.ico_4{
			width: 36rpx;
		}
		.ico_5{
			width: 34rpx;
		}
		.name{
			width: 270rpx;
			color:#fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding-right: 40rpx;
			height: 68rpx;
			margin-top: 10rpx;
			.text{
				display: block;
				padding-left:20rpx;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 48rpx;
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2334);
				font-weight: bold;
			}
		}
		.btn{
			width: 167rpx;
			height: 68rpx;
			border-radius: 35rpx;
			background: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				display: block;
				color:#fff;
				padding-left:10rpx;
				font-size: 28rpx;
				line-height: 30rpx;
			}
		}
	}
}
.home_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding:0 200rpx 0 40rpx;
	.header_info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70rpx;
		border-radius: 35rpx;
		background: rgba(0, 0, 0, 0.3);
		padding:0 8rpx;
		margin-right: auto;
		.ph{
			flex-shrink: 0;
			display: block;
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			border:4rpx solid #fff;
		}
		.name{
			width: 100%;
			color:#fff;
			font-size: 26rpx;
			line-height: 30rpx;
			padding:0 10rpx;
			overflow: hidden;
		}
		.btn{
			flex-shrink: 0;
			width: 78rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			border-radius: 30rpx;
			background: #F9BE01;
			font-size: 22rpx;
			&.hover{
				width: 100rpx;
				color:#fff;
				background: #484848;
			}
		}
	}
	.header_more{
		flex-shrink: 0;
		margin: 0 20rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		padding:0 18rpx 0 20rpx;
		.name{
			color:#fff;
			font-size: 26rpx;
			line-height: 36rpx;
			margin-left: 10rpx;
		}
	}
	.header_my{
		flex-shrink: 0;
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.ico_1{
		display: block;
		width: 36rpx;
		height: 36rpx;
	}
	.ico_2{
		display: block;
		width: 40rpx;
		height: 40rpx;
	}
}
.home_video{
	image{
		display: block;
		width: 100%;
		height: 100vh;
	}
}

</style>
